---
title: Veröffentliche deine Astro-Website auf Google's Firebase Hosting
description: Wie du deine Astro-Website auf Firebase-Hosting von Google im Internet veröffentlichst.
type: deploy
logo: firebase
supports: ['static', 'ssr']
sidebar:
  label: Firebase
i18nReady: true
---

import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

[Firebase Hosting](https://firebase.google.com/products/hosting) ist ein Dienst der App-Entwicklungsplattform [Firebase](https://firebase.google.com/) von Google, der für die Veröffentlichung einer Astro-Website genutzt werden kann.

Siehe unseren separaten Leitfaden zum [Hinzufügen von Firebase-Backend-Diensten](/de/guides/backend/firebase/) wie Datenbanken, Authentifizierung und Speicher.

## Projektkonfiguration

Dein Astro-Projekt kann in Firebase als statische Website oder als serverseitig gerenderte Website (SSR) bereitgestellt werden.

### Statische Website

Dein Astro-Projekt ist standardmäßig eine statische Website. Du brauchst keine zusätzliche Konfiguration, um eine statische Astro-Site in Firebase bereitzustellen.

### Adapter für SSR

Um SSR in deinem Astro-Projekt zu aktivieren und auf Firebase einzusetzen, füge den [Node.js-Adapter](/de/guides/integrations-guide/node/) hinzu. 

:::note
Für die Bereitstellung einer SSR-Astro-Site auf Firebase ist der [Blaze-Plan](https://firebase.google.com/pricing) oder höher erforderlich.
:::

## So funktioniert die Veröffentlichung

<Steps>
1. Installiere das [Firebase CLI](https://github.com/firebase/firebase-tools). Dies ist ein Kommandozeilen-Tool, mit dem du über das Terminal mit Firebase interagieren kannst.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install firebase-tools
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add firebase-tools
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add firebase-tools
      ```
      </Fragment>
    </PackageManagerTabs>

2. Authentifiziere das Firebase CLI mit deinem Google-Konto. Daraufhin öffnet sich ein Browserfenster, in dem du dich bei deinem Google-Konto anmelden kannst.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx firebase login
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec firebase login
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn firebase login
      ```
      </Fragment>
    </PackageManagerTabs>

3. Aktiviere die experimentelle Unterstützung von Web-Frameworks. Dies ist eine experimentelle Funktion, die es der Firebase CLI ermöglicht, deine Deployment-Einstellungen für Astro zu erkennen und zu konfigurieren.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx firebase experiments:enable webframeworks
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec firebase experiments:enable webframeworks
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn firebase experiments:enable webframeworks
      ```
      </Fragment>
    </PackageManagerTabs>

4. Initialisiere Firebase Hosting in deinem Projekt. Dadurch werden die Dateien `firebase.json` und `.firebaserc` im Stammverzeichnis deines Projekts erstellt.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx firebase init hosting
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec firebase init hosting
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn firebase init hosting
      ```
      </Fragment>
    </PackageManagerTabs>

5. Veröffentliche deine Website bei Firebase Hosting. Dadurch wird deine Astro-Website erstellt und auf Firebase bereitgestellt.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx firebase deploy --only hosting
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec firebase deploy --only hosting
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn firebase deploy --only hosting
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>
